<template>
	<view class="details">
		<u-sticky style="background:#fff">
			<view class="tabs">
				<u-tabs :list="list" :scrollable='false' bg-color="#F5F5F5" lineColor="#00D5CE" lineWidth="70"
					:current="tabIndex" @change="pickerChange" itemStyle=" height: 34px;" :inactiveStyle="{
			            color: '#606266',
			            fontSize:'32rpx',
			            transform: 'scale(1)'
			        }" :activeStyle="{
			    color: '#00D5CE',
				fontSize:'32rpx',
			    transform: 'scale(1.05)'
			}"></u-tabs>
			</view>
		</u-sticky>
		<view class="listItem y-c" v-for="(i,index) in 10" :key="index" @click="goDetails">
			<view class="item_top y-c border">
				<view class="item_top_row x-bc mb-2">
					<view>订单编号：199777540</view>
					<view>+¥15.00</view>
				</view>
			</view>
			<view class="item_bot y-c">
				<view class="item_top_row x-bc mb-2 mt-2">
					<view class="next">2023-03-09 12:23:35</view>
					<view>
						自助洗车
					</view>
				</view>
			</view>
		</view>
		<u-datetime-picker :show="show" @confirm="confirm" ref="datetimePicker" @cancel='show=false'  mode="date"
			:minDate="minStartTime" :formatter="formatter" v-model="value1" confirmColor="#00D5CE">选择有效时间
		</u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '今天'
				}, {
					name: '本月'
				}, {
					name: '自定义时间'
				}],
				tabIndex: 0,
				show: false,
				minStartTime: Number(new Date()),
				value1: Number(new Date()),
			};
		},
		methods:{
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type == 'hour') {
					return `${value}时`
				}
				if (type == 'minute') {
					return `${value}分`
				}
				// console.log(type)
				return value
			},
			pickerChange(e){
				this.show = true
			},
			confirm(e) {
				const timeFormat = uni.$u.timeFormat
				let date = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
				this.show = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tabs,
	::v-deep.u-sticky__content {
		background: #fff;
		margin-left: -15rpx;
		margin-right: -15rpx;
		padding: 20rpx;
	}

	::v-deep .u-tabs__wrapper__nav .u-tabs__wrapper__nav__item {
		padding: 0 !important;
	}

	.details {
		font-size: 28rpx;
		padding: 0 20rpx 20rpx 20rpx;

		.tabs {
			width: 100%;
		}

		.listItem {
			color: $common-color;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.item_over {
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}

		.border {
			border-bottom: 0.5rpx solid rgba(217, 217, 217, 0.6);
		}

		.item_bot {
			.next {
				color: #BABABA;
			}

			.image {
				width: 116rpx;
				height: 100rpx;
			}
		}
	}
</style>